<template>
  <el-drawer
    append-to-body
    destroy-on-close
    :size="size"
    :title="title"
    :visible.sync="drawer"
    @close="close"
  >
    <div v-if="drawer">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="房源信息" name="1">
          <div class="roomDetail">
            <div class="titleBox">
              <div class="title">
                <div class="titleName">房间信息</div>
                <el-button class="edit" type="text" @click="editInfo">
                  编辑
                </el-button>
              </div>
              <el-button @click="owner">业主信息</el-button>
            </div>
            <div class="detail">
              <div v-if="type == '1'" class="textForm">
                <div class="label">
                  <div class="name">小区</div>
                  <div class="value">
                    {{ form.community_name }}
                  </div>
                </div>
                <div class="label">
                  <div class="name">门牌号</div>
                  <div class="value">
                    {{ form.room_no }}
                  </div>
                </div>
                <div class="label">
                  <div class="name">分组</div>
                  <div class="value">
                    {{ form.group_name }}
                  </div>
                </div>
              </div>
              <div v-else-if="type == '2'" class="textForm">
                <div class="label">
                  <div class="name">小区</div>
                  <div class="value">
                    {{ form.community_name }}
                  </div>
                </div>
                <div class="label">
                  <div class="name">房间信息</div>
                  <div class="value">
                    {{ form.home_name }}-{{ form.room_no }}
                  </div>
                </div>
                <div class="label">
                  <div class="name">分组</div>
                  <div class="value">
                    {{ form.group_name }}
                  </div>
                </div>
              </div>
              <div v-else-if="type == '3'" class="textForm">
                <div class="label">
                  <div class="name">房间信息</div>
                  <div class="value">
                    {{ form.building_name }}-{{ form.room_no }}
                  </div>
                </div>
                <div class="label">
                  <div class="name">分组</div>
                  <div class="value">
                    {{ form.group_name }}
                  </div>
                </div>
              </div>
              <div v-else class="empty">暂无信息</div>
            </div>
            <div class="titleBox">
              <div class="title">
                <div class="titleName">房间备注</div>
                <el-button class="edit" type="text" @click="editDesc">
                  编辑
                </el-button>
              </div>
            </div>
            <div class="detail">
              <div v-if="form.room_desc == ''" class="empty">暂无备注</div>
              <div v-else class="text">
                {{ form.room_desc }}
              </div>
            </div>
            <div class="titleBox">
              <div class="title">
                <div class="titleName">视频图片</div>
                <el-button class="edit" type="text" @click="editMedia">
                  编辑
                </el-button>
              </div>
            </div>
            <div class="detail">
              <div
                v-if="form.room_photo == '' && form.room_video == ''"
                class="empty"
              >
                暂无视频图片
              </div>
              <div v-else class="media">
                <div v-for="item in videoList" :key="item" class="box">
                  <div class="mediaOut" @click="lookMedia(item)">
                    <video alt="" disablePictureInPicture :src="item" />
                    <vab-icon icon="play-circle-line" />
                  </div>
                  <div class="icons">
                    <vab-icon
                      icon="download-cloud-2-line"
                      @click="download(item)"
                    />
                  </div>
                </div>
                <div v-for="item in imageList" :key="item" class="box">
                  <div class="mediaOut">
                    <el-image
                      alt=""
                      :preview-src-list="imageList"
                      :src="item"
                    />
                  </div>
                  <div class="icons">
                    <vab-icon
                      icon="download-cloud-2-line"
                      @click="download(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="入住记录" name="2">
          <div class="spaceForm">
            <el-form :inline="true" :model="queryForm" @submit.native.prevent>
              <el-form-item>
                <el-input
                  v-model.trim="queryForm.keyword"
                  clearable
                  placeholder="请输入关键词"
                />
              </el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="getCustomerList"
              >
                查询
              </el-button>
            </el-form>
          </div>
          <div v-if="customerList.length >= 1" class="customerData">
            <div class="customerList">
              <div
                v-for="item in customerList"
                :key="item.id"
                class="customerBox"
              >
                <div class="boxTop">
                  <div class="topLeft">
                    <div class="status">
                      <div v-for="itm in dictList" :key="itm.id">
                        <span v-if="item.rent_status == itm.item_code">
                          {{ itm.item_name }}
                        </span>
                      </div>
                    </div>
                    <div class="name">{{ item.customer_name }}</div>
                  </div>
                  <el-button
                    v-if="
                      item.rent_status == 1 ||
                      item.rent_status == 3 ||
                      item.rent_status == 4
                    "
                    type="text"
                    @click="rentDetail(item)"
                  >
                    详情
                  </el-button>
                  <el-button
                    v-else-if="item.rent_status == 0"
                    type="text"
                    @click="bookDetail(item)"
                  >
                    详情
                  </el-button>
                </div>
                <div class="boxBot">
                  {{ item.start_date }}至{{ item.end_date }}
                </div>
              </div>
            </div>
            <el-pagination
              background
              :current-page="queryForm.page"
              :layout="layout"
              :page-size="queryForm.perpage"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
          <el-empty v-else description="暂无数据" />
        </el-tab-pane>
        <el-tab-pane label="充值记录" name="3">
          <el-empty description="暂无数据" />
        </el-tab-pane>
      </el-tabs>
      <el-dialog append-to-body :visible.sync="dialogVisible">
        <video controls disablePictureInPicture :src="dialogUrl" width="100%" />
      </el-dialog>
      <room-info ref="roomInfo" @fetch-data="updateList" />
      <room-desc ref="roomDesc" @fetch-data="updateList" />
      <room-media ref="roomMedia" @fetch-data="updateList" />
      <owner-set ref="ownerSet" />
      <rent-detail ref="rentDetail" />
      <book-detail ref="bookDetail" />
    </div>
    <div v-if="activeName == 1" class="drawerFooter">
      <el-button type="danger" @click="doDelete">删除房间</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { getHouse, deleteHouse } from '@/api/room'
import { getRentList } from '@/api/rent'
import { getDictByCode } from '@/utils/dict'
import { downloadFile } from '@/utils/index'
import roomInfo from './components/roomInfo'
import roomDesc from './components/roomDesc'
import roomMedia from './components/roomMedia'
import ownerSet from './ownerSet'
import rentDetail from './rentDetail'
import bookDetail from './bookDetail'
export default {
  name: 'RoomSet',
  components: {
    roomInfo,
    roomDesc,
    roomMedia,
    ownerSet,
    rentDetail,
    bookDetail,
  },
  data() {
    return {
      id: '',
      type: '',
      form: {},
      size: 560,
      title: '房间设置',
      activeName: '1',
      dialogUrl: '',
      dialogVisible: false,
      drawer: false,
      imageList: [],
      videoList: [],
      customerList: [],
      dictList: [],
      layout: 'total, prev, pager, next',
      total: 0,
      queryForm: {
        room_id: '',
        keyword: '',
        page: 1,
        perpage: 10,
      },
    }
  },
  methods: {
    showEdit(type, id) {
      this.id = id
      this.queryForm.room_id = id
      this.type = type
      this.getRoomDetail()
      this.getDict()
      this.drawer = true
    },
    handleClick(tab) {
      if (tab.name == '1') {
        this.getRoomDetail()
      } else if (tab.name == '2') {
        this.getCustomerList()
      }
    },
    handleSizeChange(val) {
      this.queryForm.perpage = val
      this.getCustomerList()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getCustomerList()
    },
    rentDetail(e) {
      this.$refs['rentDetail'].showEdit(e)
    },
    bookDetail(e) {
      this.$refs['bookDetail'].showEdit(e)
    },
    owner() {
      this.$refs['ownerSet'].showEdit(this.form)
    },
    editInfo() {
      this.$refs['roomInfo'].showEdit(this.type, this.form)
    },
    editDesc() {
      this.$refs['roomDesc'].showEdit(this.form)
    },
    editMedia() {
      this.$refs['roomMedia'].showEdit(this.form)
    },
    lookMedia(item) {
      this.dialogUrl = item
      this.dialogVisible = true
    },
    download(item) {
      downloadFile(item)
    },
    close() {
      this.form = this.$options.data().form
      this.drawer = false
      this.activeName = '1'
      this.customerList = []
    },
    updateList() {
      this.getRoomDetail()
      this.$emit('fetch-data')
    },
    doDelete() {
      this.$baseConfirm('你确定要删除此房间吗', null, async () => {
        const { data } = await deleteHouse({ room_id: this.id })
        if (data.is_success) {
          this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      })
    },
    async getRoomDetail() {
      const { data } = await getHouse({ room_id: this.id })
      this.form = data.info
      this.title = '房间设置(' + this.form.room_address + ')'
      this.videoList =
        data.info.room_video == '' ? [] : data.info.room_video.split(',')
      this.imageList =
        data.info.room_photo == '' ? [] : data.info.room_photo.split(',')
    },
    async getCustomerList() {
      const { data } = await getRentList(this.queryForm)
      this.customerList = data.items
      this.total = data.total
    },
    async getDict() {
      this.dictList = await getDictByCode('rent_status')
    },
  },
}
</script>
<style lang="scss" scoped>
.titleBox {
  display: flex;
  justify-content: space-between;
  height: 32px;
  margin: 10px 0;
  .title {
    display: flex;
    padding-left: 16px;
    line-height: 32px;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 20px;
      background: #6898fc;
      top: 6px;
      left: 0;
      border-radius: 2px;
    }
    .titleName {
      font-size: 16px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.85);
    }
    .edit {
      color: #f5961e;
      margin-left: 16px;
    }
  }
}
.el-tabs {
  ::v-deep .el-tabs__header {
    padding: 0 20px;
  }
  ::v-deep .el-tabs__content {
    padding: 0 20px;
  }
}
.detail {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 12px 16px;
  .textForm {
    .label {
      display: flex;
      height: 32px;
      line-height: 32px;
      .name {
        width: 80px;
        text-align: right;
        color: #666;
      }
      .value {
        margin-left: 10px;
        flex: 1;
        color: #3f3f3f;
      }
    }
  }
  .empty {
    color: #999;
  }
}

.media {
  display: flex;
  flex-wrap: wrap;
  .box {
    width: 90px;
    height: 90px;
    margin: 0 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    .mediaOut {
      width: 90px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      i {
        position: absolute;
        color: #3f3f3f;
        font-size: 30px;
        top: calc(50% - 26px);
        left: calc(50% - 15px);
      }
      ::v-deep .el-image__inner {
        width: 90px;
        height: 90px;
        object-fit: cover;
      }
      video {
        width: 90px;
        height: 90px;
        object-fit: cover;
      }
    }
    .icons {
      background: rgba(255, 255, 255, 0.9);
      height: 25px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        margin: 0 8px;
        color: #6898fc;
        cursor: pointer;
      }
    }
  }
}

.customerBox {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 10px;
  .boxTop {
    display: flex;
    justify-content: space-between;
    .topLeft {
      .status {
        display: inline-block;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 12px;
        font-weight: 500;
        color: #5187f7;
        background: #dee7ff;
        border-radius: 4px;
        margin: 0 15px 0 2px;
      }
      .name {
        display: inline-block;
        font-weight: bolder;
      }
    }
  }
  .boxBot {
    color: #999;
  }
}
.drawerFooter {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 16px;
  .el-button {
    float: right;
  }
}
</style>